<script setup>
import { useCreate } from "../store/useCreate.js";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { storeToRefs } from "pinia";

const props = defineProps({
  editType: {
    type: Number,
    default: 1,
  },
  formKey: {
    type: String,
    default: "standard",
  },
});

const createStore = useCreate();
const { formData, openTrialVersion } = storeToRefs(createStore);
const changeOpenTrialVersion = () => {
  createStore.setOpenTrialVersion(true);
};
// 交付内容
const deliverNums = ref(0);
onMounted(() => {
  //console.log(formData.value[props.formKey]);
  deliverNums.value = formData.value[props.formKey].deliver.length;
});
const addLines = () => {
  if (deliverNums.value >= 10) {
    ElMessage.warning("最多可添加10条交付内容");
    return;
  }
  deliverNums.value += 1;
  formData.value[props.formKey].deliver.push({ content: "" });
};
const delLine = (index) => {
  deliverNums.value -= 1;
  formData.value[props.formKey].deliver.splice(index, 1);
};
//
const rules = {
  goodsAmount: [
    { required: true, message: "请输入价格", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value <= 0 || value > 1000000) {
          callback(new Error("价格不能小于等于0或大于100万"));
        }
        callback();
      },
      trigger: "blur",
    },
  ],
  deliverDays: [
    { required: true, message: "请输入交付天数", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value <= 0 || value > 365) {
          callback(new Error("交付天数不能为0或大于365天"));
        }
        callback();
      },
      trigger: "blur",
    },
  ],
  introduce: [
    { required: true, message: "请输入一句话描述", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value.trim() === "") {
          callback(new Error("请输入一句话描述"));
        }
        callback();
      },
      trigger: "blur",
    },
  ],
  deliver: [{ required: true, message: "请添加交付内容", trigger: "blur" }],
};

const form2Ref = ref();
const checkForm = async () => {
  try {
    const check = await form2Ref.value.validate();
    return Promise.resolve(check);
  } catch (e) {
    return Promise.reject(e);
  }
};

defineExpose({
  checkForm,
});
// 格式化价格
const formatPrice = (e) => {
  const value = e.target.value;
  if (value) {
    formData.value[props.formKey].goodsAmount = Number(value).toFixed(2);
  }
};
</script>

<template>
  <div class="edit-goods">
    <div class="header">
      <div class="left">
        <h4>{{ props.editType === 1 ? "标准版" : "体验版" }}</h4>
        <p>
          {{
            props.editType === 1
              ? "标准版价格将在列表展示，是你主推的服务规格"
              : "体验版可以为买家提供低门槛合作机会"
          }}
          <img src="@/assets/wen-icon.png" alt="" />
        </p>
      </div>
      <el-switch
        v-if="props.editType === 2"
        v-model="openTrialVersion"
        class="ml-2"
        style="--el-switch-on-color: #1dbf73; --el-switch-off-color: #eaebee"
      />
    </div>
    <div class="form">
      <el-form
        ref="form2Ref"
        :model="formData[props.formKey]"
        label-position="top"
        :rules="rules"
      >
        <el-row :gutter="16">
          <el-col :span="15">
            <el-form-item label="价格" prop="goodsAmount">
              <template #label>
                <p class="label-slot">
                  <span class="label-title">价格</span>
                  <span class="label-tips"
                    >实际到手¥7800 <img src="@/assets/wen-icon.png" alt=""
                  /></span>
                </p>
              </template>
              <el-input
                type="number"
                v-model="formData[props.formKey].goodsAmount"
                placeholder="请输入价格"
                style="height: 48px"
                @blur="formatPrice"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="交付天数" class="form-item" prop="deliverDays">
              <el-input
                v-model="formData[props.formKey].deliverDays"
                type="number"
                placeholder="预计交付天数"
                style="height: 48px; margin-top: 22px"
              ></el-input>
              <span class="append-text">天</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="一句话描述" prop="introduce">
          <el-input
            v-model="formData[props.formKey].introduce"
            type="textarea"
            :maxlength="100"
            :show-word-limit="true"
            placeholder="如：满足个人及工作室商用的logo设计"
          ></el-input>
        </el-form-item>
        <el-form-item label="交付内容" prop="deliver">
          <div
            class="deliver-line"
            v-for="(item, index) in deliverNums"
            :key="index"
          >
            <el-input
              type="text"
              v-model="formData[props.formKey].deliver[index].content"
              placeholder="请输入交付内容"
              :show-word-limit="true"
              :maxlength="20"
              style="height: 48px; margin-bottom: 12px"
            >
            </el-input>
            <span class="del-deliver"
              ><img
                v-if="index > 2"
                @click="delLine(index)"
                src="@/assets/del-icon.png"
                alt=""
            /></span>
          </div>
          <p class="add" @click="addLines">+ 添加交付内容</p>
        </el-form-item>
      </el-form>
      <div class="open-tips" v-if="!openTrialVersion && props.editType === 2">
        <h4>什么是体验版？</h4>
        <p>商品的体验版是在标准版的基础上：</p>
        <ul>
          <li>删减一定的交付物/交付时间</li>
          <li>降低交付物复杂度</li>
          <li>为买家购买标准版服务奠定信任基础</li>
        </ul>
        <p>
          <el-button class="btn" @click="changeOpenTrialVersion"
            >提供体验版</el-button
          >
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.edit-goods {
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  margin-bottom: 16px;
  &:last-child {
    margin-bottom: 0;
  }
}

.header {
  background: rgba(25, 30, 40, 0.02);
  padding: 20px;
  display: flex;
  align-items: center;
  .left {
    flex: 1;
  }

  h4 {
    margin-bottom: 6px;
  }

  p {
    color: rgba(25, 30, 40, 0.48);
    display: flex;
    align-items: center;

    img {
      width: 12px;
      height: 12px;
      margin-left: 6px;
      cursor: pointer;
    }
  }
}

.form {
  padding: 20px 20px 0;
  position: relative;

  .add {
    color: #1dbf73;
    width: 100%;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
  }
}
.open-tips {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(1px);
  padding: 40px 0 0 90px;
  h4 {
    font-size: 16px;
    margin-bottom: 16px;
  }
  p {
    color: #191e28;
    margin-bottom: 8px;
  }
  ul {
    padding-left: 16px;
    margin-bottom: 36px;
  }
  li {
    color: rgba(25, 30, 40, 0.6);
    line-height: 24px;
  }
  .btn {
    width: 160px;
    height: 48px;
    background: #1dbf73;
    border-radius: 8px 8px 8px 8px;
    color: #fff;
    font-size: 16px;
  }
}
.label-slot {
  display: flex;
  align-items: center;

  .label-title {
    color: #191e28;
    font-weight: bold;
    flex: 1;
  }

  .label-tips {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #1dbf73;
    font-weight: bold;

    img {
      width: 12px;
      height: 12px;
      margin-left: 4px;
      position: relative;
      top: -1px;
    }
  }
}

.form-item {
  position: relative;

  .append-text {
    position: absolute;
    right: 10px;
    top: 29px;
    font-weight: bold;
    background: #fff;
  }
}
.deliver-line {
  width: 100%;
  display: flex;
  align-items: center;
  .del-deliver {
    width: 16px;
    flex: 0 0 16px;
    height: 16px;
    position: relative;
    top: -3px;
    margin-left: 12px;
    line-height: 0;
    img {
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
  }
}
</style>

<style>
.form .el-form-item__label {
  font-weight: bold;
  color: #191e28;
}

.form .el-input__wrapper {
  border-radius: 8px 8px 8px 8px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  box-shadow: none;
}

.form .el-textarea__inner {
  border-radius: 8px 8px 8px 8px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  box-shadow: none;
  height: 80px;
}
.deliver-line {
  &:hover {
    .el-input__wrapper {
      border: 1px solid #1dbf73;
    }
  }
}
</style>